﻿@{
    ViewBag.Title = "Users";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" data-backdrop="false"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 900px; height: 610px;">
                <div class="modal-header" style="background-color: crimson">
                    <h5 class="modal-title" id="exampleModalLabel">Add User</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="modelbody">
                </div>
            </div>
        </div>
    </div>
</div>
<div class="first">
    <div class="second">

        <table id="marbleTable" class="table marbleTable">
            <thead class="thead-dark">
                <th>ID</th>
                <th>Edit</th>
                <th>Name</th>
                <th>Role</th>
                <th>Email</th>
                <th>LoginId</th>
                <th>Status</th>
                <th>POSCounter</th>
                <th>Department</th>
                <th>Manager</th>
                <th>CompanyAdmin</th>
                <th>EmpStartDate</th>
                <th>EmpEndDate</th>
                <th>EmpEndResone</th>
                <th>PasswordChangeDate</th>
                <th>Invalid Attempts</th>
                <th>LastLoginTime</th>
                <th>LastLogoutTime</th>
                <th>CreationDate</th>
                <th>CreatedBy</th>
                <th>LastUpdatedBy</th>
                <th>LastUpdatedDate</th>
            </thead>
            @foreach (var item in ViewBag.users)
            {  
                <tr onchange="UpdatedList(this)">
                    <td>@item.Id  </td>
                    <td>
                        <button onClick="EditUser(@item.Id)">-</button>
                    </td>
                    <td>
                        <input type="text" value="@item.Name" class="gridText" />
                    </td>
                    <td>
                        <select name="Roles" id="Roles" class="gridText">
                            @foreach (var dow in item.Roles)
                            {
                                if (@item.Role == @dow.Value)
                                {
                                <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.Email" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.LoginId" class="gridText" />
                    </td>
                    <td>
                        <select name="Statuses" id="Statuses" class="gridText">
                            @foreach (var dow in item.Statuses)
                            {
                                if (@item.Status == @dow.Value)
                                {
                                <option value="@dow.Value" selected>@dow.Value</option>
                                }
                                else
                                {
                                <option value="@dow.Value">@dow.Value</option>
                                }
                            }
                        </select>
                    </td>
                    <td>
                        <input type="text" value="@item.POSCounter" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.Department" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.Manager" class="gridText"/>
                    </td>
                    <td>
                        <input type="checkbox"  @(item.CompanyAdmin ? "checked='checked'" : "") value="@item.CompanyAdmin" />
                    </td>
                    <td>
                        <input type="text" value="@item.EmpStartDate" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.EmpEndDate" class="gridText"/>
                    </td>
                    <td>
                        <input type="text" value="@item.EmpEndReason" class="gridText" />
                    </td>
                    <td>
                        <input type="text" value="@item.PaswardChangeDate" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.InvalidAttempts" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastLoginTime" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastLogoutTime" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.CreationDate" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.CreatedBy" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedBy" class="gridText" disabled/>
                    </td>
                    <td>
                        <input type="text" value="@item.LastUpdatedDate" class="gridText" disabled/>
                    </td>
                </tr>  
            }
        </table>

    </div>
</div>
<div class="action">

    <button class="btn btn-primary btn-md" role="button" onclick="SaveUsers()">Save</button>
    <a href="#" class="btn btn-primary btn-md" role="button" onclick="AddUser()">Add User</a>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal" onclick="targetmodel()">
        New
    </button>

</div>
<script>
    function targetmodel() {
        $('#modelbody').load('/SiteSetup/EditUser');
    }
    function AddUser() {
        var rolesOptions = '';
        var statusListOptions = '';

        @if (ViewBag.users.Count > 0)
        {
            foreach (var dow in ViewBag.users[0].Roles)
            {
                 @: rolesOptions = rolesOptions + '<option value="">@dow.Value</option>';
              }
        @: rolesOptions = rolesOptions + '</select></td>';
              foreach (var dow in ViewBag.users[0].Statuses)
              {
                   @: statusListOptions = statusListOptions + '<option value="" >@dow.Value</option>';
              }
        @: statusListOptions = statusListOptions + ' </select> </td>';
        }
        else
        {
            @: rolesOptions = '<option value="">Select</option>';
                    @: statusListOptions = '<option value="">Select</option>';
        }
        var newRow = '<tr onchange=UpdatedList(this)> <td> <a href="#"></a> </td>  <td>  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <select name="Roles" id="Roles">' + rolesOptions +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <select name="Statuses" id="Statuses">' + statusListOptions +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="checkbox" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" />  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' +
        '<td> <input type="text" value="" class="gridText" disabled/>  </td>' + '</tr>';
        $('#marbleTable tr:last').after(newRow);
    }
    function SaveUsers() {
        var users = [];
        var table = document.getElementById('marbleTable');
        for (var r = 1, n = table.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                users.push({
                    Id: table.rows[r].cells[0].innerHTML,
                    Name: table.rows[r].cells[2].children[0].value,
                    Role: table.rows[r].cells[3].children[0].selectedOptions[0].innerText,
                    Email: table.rows[r].cells[4].children[0].value,
                    LoginId: table.rows[r].cells[5].children[0].value,
                    Status: table.rows[r].cells[6].children[0].selectedOptions[0].innerText,
                    POSCounter: table.rows[r].cells[7].children[0].value,
                    Department: table.rows[r].cells[8].children[0].value,
                    Manager: table.rows[r].cells[9].children[0].value,
                    CompanyAdmin: table.rows[r].cells[10].children[0].checked,
                    EmpStartDate: table.rows[r].cells[11].children[0].value,
                    EmpEndDate: table.rows[r].cells[12].children[0].value,
                    EmpEnsReason: table.rows[r].cells[13].children[0].value
                });
            }
        }
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("InsertOrUpdateUsers", "SiteSetup")',
            data: JSON.stringify({ users: users }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
                location.reload();
            },
            error: function (e) {
                alert(e);
            }
        });
    }
    var updatedArray = [];
    function UpdatedList(x) {
        if (!updatedArray.includes(x.rowIndex)) {
            updatedArray.push(x.rowIndex);
        }
    }
    function EditUser(id) {
        $('#basicExampleModal').modal('show');
        $('#modelbody').load('/SiteSetup/EditUser', { "id": id });
    }
</script>
